<div color="accent" *tdLoading="'processingFeed'; mode:'indeterminate'; type:'circle'; strategy:'overlay'; color:'accent'">
  <!-- if this page has more than 1 card and its not disabled show all the content -->
  <ng-content select="feed-step-custom-content" *ngIf="!singleCardView && disabledDependsUponStep == null "></ng-content>

  <!-- if this page has a single card and its not disabled -->
  <mat-card class="feed-card" *ngIf="singleCardView && disabledDependsUponStep == null " >
      <mat-card-header>
        <mat-card-title>{{step.name}}</mat-card-title>
        <mat-card-subtitle>{{step.description}}</mat-card-subtitle>
        <span fxFlex></span>
      </mat-card-header>
      <mat-card-content>
        <ng-content select="feed-step-readonly-content" *ngIf="feed.readonly  && mode == 'normal'"></ng-content>
        <ng-content select="feed-step-edit-content" *ngIf="!feed.readonly && mode == 'normal'"></ng-content>
        <ng-content *ngIf=" mode =='custom' "></ng-content>
      </mat-card-content>
      <mat-card-actions *ngIf="!feed.readonly && displayEditActions">
        <button mat-button (click)="onCancel()">Cancel</button>
        <span fxFlex></span>
        <button mat-raised-button color="accent" [disabled]="!step.valid" (click)="onSave()">Save</button>
      </mat-card-actions>
    </mat-card>


  <!-- if this page is disabled -->

  <mat-card  *ngIf="disabledDependsUponStep != null" class="feed-card">
    <mat-card-header>
      <mat-card-title>{{step.name}}</mat-card-title>
      <mat-card-subtitle>{{step.description}}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <div fxLayout="column" fxLayoutAlign="center center" class="tc-grey-500 mat-typography pad-lg">
        <ng-md-icon icon="find_in_page" size="60" class="push-bottom-sm"></ng-md-icon>
        <h2>Required step needed</h2>
        <h3>This step requires {{disabledDependsUponStep.name}} to be completed first</h3>
        <button mat-raised-button color="accent" (click)="goToDependsUponStep()">Go to {{disabledDependsUponStep.name}}</button>
      </div>
    </mat-card-content>
  </mat-card>


</div>
